{% extends "base.html" %}

{% block title %}仪表板 - 知识图谱系统{% endblock %}

{% block content %}
<div class="row g-0">
    <!-- 左侧栏 -->
    <div class="col-md-3 col-lg-2">
        <div class="sidebar bg-light border-end" style="min-height: calc(100vh - 120px);">
            <div class="p-3">
                <div class="user-info mb-4">
                    <div class="text-center">
                        <div class="avatar-circle bg-primary text-white mb-2">
                            {{ current_user.username[0].upper() }}
                        </div>
                        <h6 class="mb-1">{{ current_user.username }}</h6>
                        <small class="text-muted">{{ current_user.email }}</small>
                        {% if current_user.is_admin %}
                        <div class="mt-1">
                            <span class="badge bg-warning">管理员</span>
                        </div>
                        {% endif %}
                    </div>
                </div>

                <nav class="nav flex-column">
                    <a class="nav-link active" href="#my-graphs" data-bs-toggle="pill">
                        <i class="fas fa-project-diagram me-2"></i>我的图谱
                    </a>
                    <a class="nav-link" href="#public-graphs" data-bs-toggle="pill">
                        <i class="fas fa-globe me-2"></i>公开图谱
                    </a>
                    {% if current_user.is_admin %}
                    <a class="nav-link" href="#admin-panel" data-bs-toggle="pill">
                        <i class="fas fa-cog me-2"></i>管理面板
                    </a>
                    {% endif %}
                    <hr>
                    <a class="nav-link" href="{{ url_for('upload_file') }}">
                        <i class="fas fa-upload me-2"></i>上传文件
                    </a>
                </nav>
            </div>
        </div>
    </div>

    <!-- 主要内容区 -->
    <div class="col-md-9 col-lg-10">
        <div class="p-4">
            <div class="tab-content">
                <!-- 我的图谱 -->
                <div class="tab-pane fade show active" id="my-graphs">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h4><i class="fas fa-project-diagram me-2"></i>我的知识图谱</h4>
                        <a href="{{ url_for('upload_file') }}" class="btn btn-primary">
                            <i class="fas fa-plus me-2"></i>创建新图谱
                        </a>
                    </div>

                    {% if user_graphs %}
                    <div class="row g-3">
                        {% for graph in user_graphs %}
                        <div class="col-md-6 col-lg-4">
                            <div class="card h-100 shadow-sm">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                        <h6 class="card-title">{{ graph.title }}</h6>
                                        <div class="dropdown">
                                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle"
                                                    type="button" data-bs-toggle="dropdown">
                                                <i class="fas fa-ellipsis-v"></i>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li><a class="dropdown-item" href="{{ url_for('view_graph', graph_id=graph.id) }}">
                                                    <i class="fas fa-eye me-2"></i>查看
                                                </a></li>
                                                <li><button class="dropdown-item" onclick="togglePublic({{ graph.id }})">
                                                    <i class="fas fa-{% if graph.is_public %}lock{% else %}globe{% endif %} me-2"></i>
                                                    {% if graph.is_public %}设为私有{% else %}设为公开{% endif %}
                                                </button></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <p class="card-text text-muted small">{{ graph.description or '暂无描述' }}</p>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <small class="text-muted">
                                            <i class="fas fa-calendar me-1"></i>
                                            {{ graph.created_at.strftime('%Y-%m-%d') }}
                                        </small>
                                        <span class="badge bg-{% if graph.is_public %}success{% else %}secondary{% endif %}">
                                            {% if graph.is_public %}公开{% else %}私有{% endif %}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <div class="text-center py-5">
                        <i class="fas fa-project-diagram fa-3x text-muted mb-3"></i>
                        <h5>还没有创建知识图谱</h5>
                        <p class="text-muted">上传Excel或JSON文件开始创建您的第一个知识图谱</p>
                        <a href="{{ url_for('upload_file') }}" class="btn btn-primary">
                            <i class="fas fa-upload me-2"></i>立即上传
                        </a>
                    </div>
                    {% endif %}
                </div>

                <!-- 公开图谱 -->
                <div class="tab-pane fade" id="public-graphs">
                    <h4 class="mb-4"><i class="fas fa-globe me-2"></i>公开知识图谱</h4>

                    {% if public_graphs %}
                    <div class="row g-3">
                        {% for graph in public_graphs %}
                        <div class="col-md-6 col-lg-4">
                            <div class="card h-100 shadow-sm">
                                <div class="card-body">
                                    <h6 class="card-title">{{ graph.title }}</h6>
                                    <p class="card-text text-muted small">{{ graph.description or '暂无描述' }}</p>
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <small class="text-muted">
                                            <i class="fas fa-user me-1"></i>{{ graph.user.username }}
                                        </small>
                                        <small class="text-muted">
                                            <i class="fas fa-calendar me-1"></i>
                                            {{ graph.created_at.strftime('%Y-%m-%d') }}
                                        </small>
                                    </div>
                                    <a href="{{ url_for('view_graph', graph_id=graph.id) }}"
                                       class="btn btn-outline-primary btn-sm w-100">
                                        <i class="fas fa-eye me-2"></i>查看图谱
                                    </a>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <div class="text-center py-5">
                        <i class="fas fa-globe fa-3x text-muted mb-3"></i>
                        <h5>暂无公开的知识图谱</h5>
                        <p class="text-muted">当前没有用户公开分享知识图谱</p>
                    </div>
                    {% endif %}
                </div>

                <!-- 管理面板 (仅管理员可见) -->
                {% if current_user.is_admin %}
                <div class="tab-pane fade" id="admin-panel">
                    <h4 class="mb-4"><i class="fas fa-cog me-2"></i>管理面板</h4>

                    <div class="row mb-4">
                        <div class="col-md-3">
                            <div class="card text-center">
                                <div class="card-body">
                                    <i class="fas fa-users fa-2x text-primary mb-2"></i>
                                    <h5>{{ all_graphs|length }}</h5>
                                    <small class="text-muted">总图谱数</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card text-center">
                                <div class="card-body">
                                    <i class="fas fa-globe fa-2x text-success mb-2"></i>
                                    <h5>{{ public_graphs|length }}</h5>
                                    <small class="text-muted">公开图谱</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h6 class="mb-0">所有知识图谱</h6>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>标题</th>
                                            <th>创建者</th>
                                            <th>状态</th>
                                            <th>创建时间</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for graph in all_graphs %}
                                        <tr>
                                            <td>{{ graph.title }}</td>
                                            <td>{{ graph.user.username }}</td>
                                            <td>
                                                <span class="badge bg-{% if graph.is_public %}success{% else %}secondary{% endif %}">
                                                    {% if graph.is_public %}公开{% else %}私有{% endif %}
                                                </span>
                                            </td>
                                            <td>{{ graph.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                                            <td>
                                                <a href="{{ url_for('view_graph', graph_id=graph.id) }}"
                                                   class="btn btn-sm btn-outline-primary">查看</a>
                                                <form method="POST" action="{{ url_for('admin_delete_graph', graph_id=graph.id) }}"
                                                      class="d-inline" onsubmit="return confirm('确定要删除这个图谱吗？')">
                                                    <button type="submit" class="btn btn-sm btn-outline-danger">删除</button>
                                                </form>
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block head %}
<style>
.avatar-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    margin: 0 auto;
}

.sidebar .nav-link {
    color: #495057;
    border-radius: 0.375rem;
    margin-bottom: 0.25rem;
}

.sidebar .nav-link:hover, .sidebar .nav-link.active {
    background-color: #e9ecef;
    color: #0d6efd;
}

.card {
    transition: transform 0.2s;
}

.card:hover {
    transform: translateY(-2px);
}
</style>
{% endblock %}

{% block scripts %}
<script>
function togglePublic(graphId) {
    fetch(`/api/graph/${graphId}/toggle_public`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.error) {
            alert('操作失败: ' + data.error);
        } else {
            location.reload();
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('操作失败');
    });
}
</script>
{% endblock %}